import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
import merge from 'lodash/merge';
import cloneDeep from 'lodash/cloneDeep';

const Radar: React.FC<any> = (props: any) => {
  const defaultSeries: any = {
    // 普通线条
    normalLine: {
      type: 'radar',
      symbol: 'none',
      areaStyle: {
        opacity: 0.4,
      },
      lineStyle: {
        width: 3,
      },
    },
  };
  const defaultOption: any = {
    normal: {
      legend: {
        show: true,
        right: '10%',
        top: 16,
        textStyle: {
          color: 'rgba(255,255,255,1)',
          fontSize: 12,
        },
        icon: 'rect',
        itemWidth: 10,
        itemHeight: 3,
      },
      color: ['#30c8ff', '#ffca0a'],
      tooltip: {
        show:true,
        backgroundColor: '#fff',
        borderColor: 'none',
        padding: 12,
        color:'#FFF',
        textStyle: {
          fontSize:24,
        }
      },
      radar: [
        {
          indicator: [],
          center: ['50%', '50%'],
          radius: 30,
          splitNumber: 5,
          axisName: {
            color: '#FFFFFF',
          },
          splitArea: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.2)',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: [
                'rgba(255,255,255,0.2)',
                'rgba(255,255,255,0.2)',
                'rgba(255,255,255,0.2)',
                'rgba(255,255,255,0.6)',
              ],
            },
          },
        },
      ],
    },
  };
  const mergeOption = (option: any = {}) => {
    const newOption = merge(
      {},
      defaultOption[option.styleType || 'normal'],
      option,
    );
    return newOption;
  };

  const mergeSerie = (serie: any = {}) => {
    const newSerie = merge(
      {},
      defaultSeries[serie.styleType || 'normalLine'],
      serie,
    );
    return newSerie;
  };

  const chartOptionMerge = () => {
    const propsOption = props.option || {};
    if (propsOption.series && propsOption.series.length) {
      propsOption.series = propsOption.series.map((item: any) => {
        item = mergeSerie(item);
        return item;
      });
    }
    return mergeOption(propsOption);
  };
  return (
    <ReactEcharts
      style={{width: '100%', height: '100%'}}
      echarts={echarts}
      {...props}
      option={cloneDeep(chartOptionMerge())}
    />
  );
};

export default Radar;
